@charset "utf-8";
@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

$color:#FF9344;
//
.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 r(21);
    header {
        .back-btn {
            width: r(123);
            height: r(57);
            background-color: transparent;
            border: r(2) solid $color;
            border-radius: r(18);
            font-size: r(26);
            margin-top: r(31);
            outline: none;
        }
        .msg {
            width: r(62);
            height: r(55);
            margin-top: r(28);
            font-size: 0;
            img {
                width: 100%;
            }
        }
        .fenlei {
            width: 10%;
            margin: r(47) auto 0;
            font-size: r(26);
        }
    }
    section {
        width: 100%;
        position: absolute;
        left: 0;
        top: r(105);
        bottom: r(150);
        overflow: hidden;
        overflow-y: auto;
        padding: 0 r(21);
        .personal {
            margin-top: r(19);
            .touxiang {
                width: r(170);
                height: r(170);
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .geren-msg {
                width: 70%;
                height: r(170);
                font-size: 0;
                padding-left: r(24);
                position: relative;
                p {
                    font-size: r(30);
                    color: black;
                    margin-top: r(34);
                    margin-bottom: r(37);
                }
                input {
                    border: none;
                    background-color: transparent;
                }
                span {
                    position: absolute;
                    top: r(26);
                    right: 0;
                    font-size: r(87);
                }
            }
        }
        .classify{
            margin-top: r(26);
            .box{
                width: r(194);
                height: r(151);
                text-align: center;
                font-size: 0;
                padding-top: r(22);
                i{
                    font-size: r(60);
                    color: white;
                }
                p{
                    font-size: r(26);
                }
                &:nth-of-type(1){
                    background-color: #b2e0a0;
                }
                &:nth-of-type(2){
                    background-color: #e0b7a0;
                }
                &:nth-of-type(3){ 
                    background-color: #a0dce0;
                    margin: 0 auto;
                }
            }
        }
        //public title  S
        .hot-title {
            margin-top: r(24);
            span:nth-of-type(1) {
                font-size: r(30);
                vertical-align: middle;
                i {
                    font-size: r(56);
                    color: $color;
                    vertical-align: middle;
                }
            }
            span:nth-of-type(2) {
                font-size: r(24);
                line-height: r(56);
                i {
                    font-size: r(25);
                    color: $color;
                }
            }
            &:nth-of-type(7){
                margin-top: r(80);
            }
        }
        //public title  E
        .btn-box{
            width: r(538);
            margin: r(36) auto 0;
            button{
                width: r(148);
                height: r(76);
                background-color: $color;
                border-radius: r(76);
                font-size: r(24);
                color: white;
            }
        }
    }
}